<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>Selectable - ESUI Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
    <link rel="stylesheet" href="assets/themes/standard.css" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="assets/ie8.css" />
    <![endif]-->
</head>
<body id="selectable-demo" >
    <div class="header">
        <h1 id="branding">ESUI - Selectable</h1>
    </div>
    <div class="ui-g main-container">
        <div id="side-bar" class="ui-u-1-5">
            <ul id="navigator" class="ui-nav">
            </ul>
        </div>
        <div id="main" class="ui-u-4-5">
            <h2>Selectable</h2>
            <p>Selectable</p>
            <div class="example">
                <ol id="selectable" class="esui-clearfix">
                    <li class="ui-state-default">1</li>
                    <li class="ui-state-default">2</li>
                    <li class="ui-state-default">3</li>
                    <li class="ui-state-default">4</li>
                    <li class="ui-state-default">5</li>
                    <li class="ui-state-default">6</li>
                    <li class="ui-state-default">7</li>
                    <li class="ui-state-default">8</li>
                    <li class="ui-state-default">9</li>
                    <li class="ui-state-default">10</li>
                    <li class="ui-state-default">11</li>
                    <li class="ui-state-default">12</li>
                </ol>

                <ol id="selectable-list">
                    <li class="ui-widget-content">Item 1</li>
                    <li class="ui-widget-content">Item 2</li>
                    <li class="ui-widget-content">Item 3</li>
                    <li class="ui-widget-content">Item 4</li>
                    <li class="ui-widget-content">Item 5</li>
                    <li class="ui-widget-content">Item 6</li>
                    <li class="ui-widget-content">Item 7</li>
                </ol>
                <div>
                    <span>selected items: </span>
                    <span id="items"></span>
                </div>
            </div>
            <script type="text/sample" data-refid="main-js">
            </script>
        </div>
    </div>
    <script src="assets/loader/esl.js"></script>
    <script src="config.js"></script>
    <script src="demo.js"></script>
    <script src="assets/google-code-prettify/prettify.js"></script>
    <script id="main-js">
    require(
        [
            'esui',
            'jquery',
            'esui/behavior/Selectable',
            'esui/Tab',
            'demo'
        ],
        function (esui, $) {
            esui.init();
            $('#selectable').selectable();

            $('#selectable-list').selectable(
                {
                    stop: function (d) {
                        var result = $('#items').empty();
                        $('.ui-selectable-selected', this.element).each(function () {
                            var index = $('#selectable-list li').index(this);
                            result.append('#' + (index + 1));
                        });
                    },
                    selected: function () {
                        // console.log('selected')
                    },
                    unselected: function () {
                        // console.log('unselected')
                    },
                    selecting: function () {
                        // console.log('selecting')
                    },
                    unselecting: function () {
                        // console.log('unselecting')
                    },
                    autoRefresh: false
                }
            );
        }
    );
    </script>
    <script src="sitemap.js"></script>
</body>
</html>
